﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../src/js/rayui.js" use="lazy"></script>
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }

        body {
            padding: 20px;
        }

        #imagepanel, #imagepanel1 {
            width: 60%;
            height:300px;
            border: 1px solid #eee;
            overflow: auto;
            display: inline-block;
        }
        #imagepanel1Inner {
            width: 200%;
        }
        img {
            width: 120px;
            height: 120px;
        }
    </style>
</head>
<body>
    <a class="btn-link" href="#anchor">使用说明</a>
<br /><br />
<div class="card card-color-orange">为了能看到效果，本页面所有敏感值调为-50，默认50，即图片露出50px以内不加载图片，超出才加载</div>
    <h4>1、竖向滚动条</h4>
    <div id="imagepanel"></div><br />

    <h4>2、横向竖向滚动条</h4>
<div id="imagepanel1"><div id="imagepanel1Inner"></div></div>

    
<h4>3、body内图片，使用imgClass属性局部懒加载</h4>
<div id="bodyPanel"></div>

<script>

        var url = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=978148473,4288126646&fm=26&gp=0.jpg';
        rayui.ready(function () {
            for (var i = 0; i < 50; i++) {
                $("#imagepanel").append('<img index=' + i + ' lazy-src="' + url + '" />');
                $("#imagepanel1Inner").append('<img index=' + i + ' lazy-src="' + url + '" />');
                $("#bodyPanel").append('<img class="bodyimg" index=' + i + ' lazy-src="' + url + '" />');
            }
            $("#imagepanel").lazyimg({ gap: -50 });
            $("#imagepanel1").lazyimg({ gap: -50 });
            $(document).lazyimg({ gap: -50, imgClass: ".bodyimg" });



        });

    </script>
    
<div class="card">
    <p>1、默认情况下body不含有滚动条，因此body内的图片不能写成$("body").lazyimg();而应该写成$(document).lazyimg();如果body进行了特殊处理有了滚动条则可以</p>
    <p>2、配合imgClass属性可实现局部加载，比如第三个例子$(document).lazyimg()，如果不指定特有的imgClass，系统会把页面所有图片都进行判断，造成性能浪费，此时配合imgClass属性可实现局部加载</p>
</div>



<h4 id="anchor">使用说明</h4>
<pre style="color: #159200; word-wrap: break-word; white-space: pre-wrap;">
调用方法：$("jqselector").lazyimg(options);
    
options属性包含：
imgClass: 图片的样式，默认空加载所有图片。指定样式加载指定样式的图片
gap: 50, 敏感值
srcAttr: 懒加载预置src的属性标签，默认"lazy-src"

  </pre>

</body>
</html>